<template>
	
	<view class="yunshi">
		<picker mode="selector" :range="zodiacSignsChinese" @change="onSelectSign">
			<view class="picker">
				选择星座: {{ selectedSignChinese || '请选择' }}
			</view>
		</picker>
		<button @click="fetchHoroscope" :disabled="!selectedSign">获取运势</button>
		
		<view v-if="horoscopeData">
			<text class="horoscope-text">星座: {{ horoscopeData.title }}</text>
			<text class="horoscope-text">日期: {{ horoscopeData.time }}</text>
			<text class="horoscope-text">幸运数字: {{ horoscopeData.luckynumber }}</text>
			<text class="horoscope-text">幸运颜色: {{ horoscopeData.luckycolor }}</text>
			<text class="horoscope-text">综合运势: {{ horoscopeData.fortunetext.all }}</text>
			<text class="horoscope-text">爱情运势: {{ horoscopeData.fortunetext.love }}</text>
			<text class="horoscope-text">工作运势: {{ horoscopeData.fortunetext.work }}</text>
			<text class="horoscope-text">财运: {{ horoscopeData.fortunetext.money }}</text>
			<text class="horoscope-text">健康: {{ horoscopeData.fortunetext.health }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { CONFIG } from "../../utils/config";

// English to Chinese mapping
const zodiacSigns = ref([
	'aries', 'taurus', 'gemini', 'cancer', 'leo', 'virgo', 
	'libra', 'scorpio', 'sagittarius', 'capricorn', 'aquarius', 'pisces'
]);

const zodiacSignsChinese = ref([
	'白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', 
	'天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'
]);

const selectedSign = ref('');
const selectedSignChinese = ref('');
const horoscopeData = ref(null);

function onSelectSign(event) {
	const index = event.detail.value;
	selectedSign.value = zodiacSigns.value[index];
	selectedSignChinese.value = zodiacSignsChinese.value[index];
}

async function fetchHoroscope() {
	if (!selectedSign.value) return;

	try {
		const url = `${CONFIG.yunshi_url}?type=${selectedSign.value}&time=today`;
		let res = await uni.$get(url);
		if (res.data.success) {
			horoscopeData.value = res.data.data;
		} else {
			uni.showToast({
				title: '获取运势失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error("获取运势失败：", error);
		uni.showToast({
			title: '请求失败',
			icon: 'none'
		});
	}
}
</script>

<style scoped>
.yunshi {
	background-image: url('http://spa7huiam.hn-bkt.clouddn.com/%E7%94%9F%E6%88%90%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87.png');
	background-size: cover;
	background-position: center;
	padding: 20px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent overlay */
	
}

.picker {
	margin-bottom: 10px;
	padding: 10px;
	background-color: #f0f0f0;
	border-radius: 5px;
}

button {
	margin-bottom: 20px;
	padding: 5px 10px;
	background-color: #007AFF;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

button:disabled {
	background-color: #ccc;
}

.horoscope-text {
	display: block;
	margin-bottom: 10px;
	padding: 10px;
	font-size: 16px;
	border: 2px solid #32CD32; /* Glowing green border */
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
	color: #000; /* White text color */
}
</style>
